<template>
	<view class="bgIndex ">
		<liu-slide-img :list="listPoster" :autoplay="autoplay" :interval="interval"
			@click="clickSlideImg"></liu-slide-img>
		<!-- <image class="bg" src="../../static/第一行所有图标/矩形 44.png" mode=""></image> -->
		<sunui-navbar :items="tabList" lineHeight="70rpx" :isCenter="true" :currentIndex="currentIndex" padding="12rpx"
			activeColor="#785DF6" :size="300" activeLineBg="#785DF6" textAlign="center" activeLineWidth="50rpx"
			activeDirection="center" activeLineHeight="5rpx" bgColor="#fff" :margin="20"
			@change="getChange"></sunui-navbar>
		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<view v-for="(item,index) in list" :key="index">
				<view style="padding: 20rpx;" class=" flex-between padding_20rpx_0 background-color_FFFFFF">
					<view class="flex-start-center">
						<view class="orderLocation">
							<image class="avatar" :src="item.avatar" mode=""></image>

							</image>

						</view>
						<view class="margin-left_16rpx flex-columns" style="height: 120rpx;">
							<view class="flex-start-center">
								<view class="font-overflow font-weight " style="color: #333333;">
									{{item.nickname}}


								</view>
								<view class="follow flex"
									v-if="item.is_follow_me==0&&item.is_follow_he==0">
									<text>关注</text>
								</view>
								<view class="fans flex"
									v-if="item.is_follow_me==1">
									<text>我的粉丝</text>
								</view>
								<view class="fans flex"
									v-if="item.is_follow_he==1">
									<text>已经关注</text>
								</view>
							</view>
							<view class="font-overflow2">
								<text>{{item.introduce}}</text>
							</view>



							<view class="">
								<text style="color:#999999">最近访问：{{item.update_time}}</text>
							</view>


						</view>
					</view>
					<view class="homepage flex" @click="ViewHomepageFn(currentIndex==0?item.uid:item.visit_uid)">
						<text style="margin-bottom: 5rpx;">查看主页</text>
					</view>
				</view>

			</view>
		</mescroll-body>


	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				userInfo: uni.getStorageSync("userInfo"),
				currentIndex: 0,
				tabList: [{
					name: '谁看过我',
					id: '' //null
				}, {
					name: '我看过谁',
					id: '1' //null
				}, ],
				windowHeight: null,
				list: [],
				listPoster: [],
				autoplay: true,

				interval: 3000,
				listPoster: [],

			}
		},
		onLoad() {



			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 800;
				}
			});
			this.posterFn()
		},
		onShow() {
			this.$nextTick(() => {
				this.mescroll?.resetUpScroll();
			})
		},
		methods: {

			async posterFn() {
				const resPoster = await this.$http.post({
					url: this.$api.poster,
					data: {

						type: 8

					},
					headers: {

					}

				})

				if (resPoster.code == 0) {




					// 	// 展示区域  1 首页 2 商城 3 套餐卡市场 这里还需要区分

					this.listPoster = resPoster.data.filter(item => item.type == 8);
					console.log(this.listPoster)




				} else {

					this.$sun.toast(resPoster.message, 'none')
				}



			},
			getChange(index) {
				console.log(index)

				this.currentIndex = index

				this.$nextTick(() => {
					this.mescroll?.resetUpScroll();
				})


			},
			async upCallback(scroll) {
				const log = this.currentIndex == 0 ? this.$api.visitMeLog : this.$api.myVisitLog
				const result = await this.$http.post({
					url: log,
					data: {
						page: scroll.num,
						limit: 10,
						uid: this.userInfo.id

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})


				if (result.code == 0) {

					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];

					this.list = this.list.concat(result.data.list);

					console.log('this.list', this.list, this.list.length);
				} else {
					this.$sun.toast(result.message, 'none')
				}


			},
			ViewHomepageFn(uid) {
				this.$sun.navGo('/pagesB/index/socialDetails', {
					uid: uid
				})

			}

		}
	}
</script>

<style lang="less" scoped>
	.bgIndex {


		.bg {

			height: 232rpx
		}

		.fans {
			margin-left: 10rpx;
			width: 110rpx;
			height: 36rpx;
			color: rgb(81, 169, 255);
			background: rgb(210, 242, 255);
		}

		.follow {
			margin-left: 10rpx;
			width: 68rpx;
			height: 36rpx;
			color: rgb(182, 32, 224);
			background: rgb(247, 219, 255);
		}

		.homepage {
			width: 144rpx;
			height: 64rpx;
			box-sizing: border-box;
			border: 2rpx solid rgb(120, 93, 246);
			border-radius: 76px;
			color: rgb(120, 93, 246);
			background: rgb(255, 255, 255);
		}

		.chat {
			width: 144rpx;
			height: 53rpx;
			box-sizing: border-box;
			border: 2rpx solid rgb(120, 93, 246);
			border-radius: 76px;
			color: rgb(120, 93, 246);
			background: rgb(255, 255, 255);
		}

		.orderLocation {
			position: relative;

			.avatar {
				width: 61px;
				height: 61px;
				border-radius: 50%;
			}

			.orderImg {
				width: 90px;
				height: 90px;
				border-radius: 20rpx;

			}

			.orderStatusImg {
				position: absolute;
				left: 0;
				top: 0;
				width: 106rpx;
				height: 48rpx;
				border-radius: 16rpx 0rpx 16rpx 0rpx;
				color: #fff;
				background: rgb(224, 32, 32);
				z-index: 999;
			}

			.orderStatusImged {
				position: absolute;
				left: 0;
				top: 0;
				width: 106rpx;
				height: 48rpx;
				border-radius: 16rpx 0rpx 16rpx 0rpx;
				color: #fff;
				border-radius: 16rpx 0rpx 16rpx 0rpx;

				background: rgb(0, 0, 0);
				z-index: 999;
			}
		}


	}
</style>